<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>墨芽豆课堂</title>
    <link rel="stylesheet" href="css/api.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/playvideo.css">
    <style>
        .imgbox {
            position: relative;
            cursor: pointer;
        }

        .loginoutbox {
            position: absolute;
            right: -21px;
            top: 77px;
            width: 197px;
            line-height: 35px;
            background-color: #666;
            text-align: center
        }

        .play {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 999;
        }

        .play .playbox {
            position: absolute;
            width: 1200px;
            height: 600px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 999;
        }

        .play .playbox video {
            width: 100%;
            height: 100%;
        }

        .play .msk {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
            background-color: rgba(0, 0, 0, .6);
        }

        #pdf {
            position: absolute;
            width: 100%;
            left: 0;
            top: 0;
            height: 100%;
            display: none;
            z-index: 999;
        }

        #pdf .msk {
            position: absolute;
            /* width: 100%;
            height: 100%; */
            background-color: transparent;
            z-index: 999;
            right: 0;
            top: 0;
        }

        #buttons {
            display: none !important;
        }

        .guanbi {
            position: fixed;
            z-index: 9999;
            right: 46px;
            top: 30px;
            color: #fa4f62;
            border: 1px solid #fa4f62;
            border-radius: 5px;
            padding: 5px 15px;
            cursor: pointer;
            background-color: #fff;
        }

        #pdfbox {
            height: 100%;
            position: relative;
            z-index: 1;
        }

        .bgc {
            height: 50px;
            width: 100%;
            top: 0;
            left: 0;
            position: fixed;
            z-index: 998;
        }

        .playno {
            padding-top: 50%;
            position: relative;
            z-index: 999;
            text-align: center;
            transform: translateY(-50%);
        }

        .navbox .w1240 .tab {
            width: 500px;
            margin-left: -374px;
        }
    </style>
</head>

<body>

    <div id="app" v-cloak>
        <div class="nav navbox">
            <div class="w1240 h">
                <div class="imgbox left">
                    <img src="../image/logo.png" alt="" class="logo"> PC课程端
                </div>
                <div class="tab">
                    <span data-index="2">上课管理</span>
                </div>
                <div class="imgbox" @click="loginBox">
                    <img :src="teacherInfo.avatar" alt="" class="logo touxiang" v-if="teacherInfo.avatar">
                    <img src="./image/b.png" alt="" v-if="!teacherInfo.avatar" class="logo touxiang">
                    {{teacherInfo.nickname}}
                    <div class="loginoutbox" v-if="loginoutboxFlag" @click="loginOut">
                        退出账号
                    </div>
                </div>
            </div>
        </div>
        <div class="content">
            <!-- 上课 -->
            <div class="package">
                <template v-for="(item,index) in studentList">
                    <div class="list">
                        <div class="time">
                            {{item.appoint_time}}
                        </div>
                        <div class="title">
                            {{item.class_name}}
                        </div>
                        <div class="order" ref="abc">
                            老师： {{item.teacher_nickname}}
                            <div class="btn">
                                <span class="shangke" :data-starttime="item.appoint_time" :data-appintid="item.id"
                                    :data-index="index" @click="fnStartClass(item)"
                                    v-if="item.status_extra != 3">开始上课</span>
                                <span class="chakan" v-if="item.status_extra != 3" @click="readMe(item)">查看教材</span>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</body>
<script src="./libs/thirdpart/vue.js"></script>
<script src="js/axios.js"></script>
<script src="js/moment.js"></script>
<script src="./js/pdfobject.js"></script>
<script src="./js/playvideo.js"></script>
<script src="./js/base.js"></script>
<script>
    var vm;
    var token = localStorage.token;
    var AUTH_TOKEN = 'Bearer ' + token;
    axios.defaults.baseURL = baseURL;
    axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    window.onload = function () {
        if (!token) {
            window.location.href = './html/login.html'
        }
    }
    function guanbi() {
        var pdf = document.querySelector('#pdf');
        pdf.style.display = 'none'
    }
    vm = new Vue({
        el: '#app',
        data: {
            studentList: '',
            alertFlag: false,
            teacherInfo: {},
            loginoutboxFlag: false
        },
        created() {
            this.fnAppointmentx(true);
            this.getUserInfo()
        },
        mounted: function () {

        },
        methods: {
            readMe: function (item) {
                var textbook = item.textbook;
                let nickname = this.teacherInfo.nickname;
                let mobile = this.teacherInfo.mobile;
                let area = this.teacherInfo.area;
                let url = './html/couse.html?textbook=' + textbook + '&nickname=' + nickname + '&mobile=' + mobile + '&area=' + area + '&class_id=' + item.class_id;
                window.open(url)
            },
            loginBox() {
                this.loginoutboxFlag = !this.loginoutboxFlag;
                setTimeout(() => {
                    this.loginoutboxFlag = !this.loginoutboxFlag
                }, 3000);
            },
            loginOut() {
                window.location.href = './html/login.html'
            },
            //课程列表
            fnAppointmentx() {
                axios.get('api/student/appointment/class/list?status=2')
                    .then((res) => {
                        if (res.data.code == 10200) {
                            this.studentList = res.data.data.data;
                        } else {
                            this.ToastOpen(res.data.msg)
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            ToastOpen(text) {
                this.alertFlag = !this.alertFlag;
                this.text = text;
                setTimeout(() => {
                    this.alertFlag = !this.alertFlag;
                }, 2000)
            },
            //获取个人信息
            getUserInfo() {
                axios.get('api/user/student/show')
                    .then((res) => {
                        if (res.data.code == 10200) {
                            this.teacherInfo = res.data.data;
                        } else {
                            this.ToastOpen(res.data.msg)
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            //老师上课
            fnStartClass(ev) {
                console.log(ev);
                var appid = ev.id;
                var starttime = ev.appoint_time;
                var teacher_nickname = ev.teacher_nickname;
                var teacherId = 'teacherId' + ev.teacher_user_id;
                var studentId = 'studentId' + ev.student_user_id;
                var class_id = ev.class_id;
                // console.log(studentId)
                var textbook = ev.textbook;
                // var  starttime = '2020-5-21 33:20';
                var chidao = false;
                var obj = {
                    time: starttime,
                    hadTime: 5,
                    math: 'subtract'
                }
                var obj2 = {
                    time: starttime,
                    hadTime: 50,
                    math: 'add'
                }
                var obj3 = {
                    time: starttime,
                    hadTime: 0,
                    math: 'add'
                }
                var obj4 = {
                    time: starttime,
                    hadTime: 14,
                    math: 'add'
                }
                var a = this.timesTamp(obj);
                var b = this.timesTamp(obj2);
                var c = this.timesTamp(obj3);
                var d = this.timesTamp(obj4);
                // if (b > 0) {
                //     this.ToastOpen('课程结束了，不能进入直播间');
                //     return;
                // }
                // if (a < 0) {
                //     this.ToastOpen('未到上课时间');
                //     return
                // }
                // if (c > 0 && d < 0) {
                //     chidao = true;
                // }
                // var parme = {
                //     appoint_id: appid
                // }
                let parme = {
                    appoint_id: ev.id,
                    status: ev.status_extra
                }
                axios.post('api/student/appointment/class/enter', parme)
                    .then((response) => {
                        console.log(response)
                        if (response.data.code == 10200) {
                            axios.post('/api/user/sig/register', {
                                username: studentId
                            }).then((res) => {
                                var winHref = {
                                    roomId: appid,
                                    appintId: appid,
                                    userId: studentId,
                                    studentName: studentId,
                                    userToken: res.data.data.sig,
                                    starttime: starttime,
                                    class_id: class_id
                                };
                                var href = "./html/stu_live.html?id=" + winHref.roomId + "&appintId=" + appid + "&studentName=" + winHref.studentName + "&userId=" + winHref.userId + "&userToken=" + winHref.userToken + '&chidao=' + chidao + '&textbook=' + textbook + '&starttime=' + starttime + '&class_id=' + class_id;
                                window.location.href = href;
                            })
                        } else {
                            this.ToastOpen(response.data.msg);
                            return false;
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            timesTamp(obj) {
                var curr = new Date().getTime()
                var time = obj.time;
                var hadTime = obj.hadTime;
                var times;
                // console.log(new Date())
                // console.log(time)
                if (obj.math == 'add') {
                    time = moment(time).add(hadTime, 'm').format('YYYY-MM-DD HH:mm:ss')
                } else {
                    time = moment(time).subtract(hadTime, 'm').format('YYYY-MM-DD HH:mm:ss')
                }
                times = curr - new Date(time).getTime();
                return times;
            },
        }
    });
    //获取滚动条当前的位置 
    function getScrollTop() {
        var scrollTop = 0;
        if (document.documentElement && document.documentElement.scrollTop) {
            scrollTop = document.documentElement.scrollTop;
        } else if (document.body) {
            scrollTop = document.body.scrollTop;
        }
        return scrollTop;
    }

    //获取当前可视范围的高度 
    function getClientHeight() {
        var clientHeight = 0;
        if (document.body.clientHeight && document.documentElement.clientHeight) {
            clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
        } else {
            clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
        }
        return clientHeight;
    }

    //获取文档完整的高度 
    function getScrollHeight() {
        return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
    }

    //滚动事件触发
    window.onscroll = function () {
        if (getScrollTop() + getClientHeight() == getScrollHeight()) {
            // console.log(vm.tabFlag)
            if (vm.tabFlag) {
                if (vm.selectIndex == 0) {
                    vm.fnAppointmentx(false)
                }
            } else {
                // console.log(222)
                vm.fnExamination(false)
            }
        }
    }
</script>

</html>